<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");


        canvas.width = 500;
        canvas.height = 500 ;
        canvas.style.border = "1px solid #000";

        //绘制x轴
        var x0 = 100;
        var y0 = 400;
        var maxHeight = 300;
        var arrowWidth = 10;
        ctx.beginPath();
        ctx.strokeStyle = 'grey';
        ctx.lineJoin = 'miter';
        ctx.moveTo(x0 , y0);
        ctx.lineTo(500, 400);
        //往上面画箭头
        ctx.lineTo(500 - arrowWidth,400-arrowWidth);
        ctx.moveTo(500,400);
        ctx.lineTo(500 - arrowWidth,400+arrowWidth);
        ctx.stroke();

        //绘制y轴
        ctx.beginPath();
        ctx.strokeStyle = 'grey';
        ctx.lineJoin = 'miter';
        ctx.moveTo(x0,y0);
        ctx.lineTo(100, 0);
        ctx.lineTo(100-arrowWidth, arrowWidth);
        ctx.moveTo(100, 0);
        ctx.lineTo(100+arrowWidth,arrowWidth);
        ctx.stroke();

        //绘制线段
        var data = [.4,.5,.8,.7];
        var pointWidth = 400 / (data.length+1);
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        for(var i = 0;i<data.length;i++){
            var x = x0 + (i+1)*pointWidth;
            var y = y0 - data[i]*maxHeight;
            ctx.lineTo(x, y);

            ctx.stroke();
        }

    }
</script>
</body>
</html>